<template>
    <div class="ranking-container">
        <div class="chart" id="chart_right3"></div>
    </div>
</template>

<script>
    // 政府部门大屏右3排名：机构产生量排名1
    import { getAction } from '@/api/manage'
    import echarts from 'echarts'
    import { mixinDevice } from '@/utils/mixin.js'

    export default {
        name: 'ranking',
        mixins: [mixinDevice],
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                // 图表的实例对象
                chartInstance: null,
                allData: null, // 返回的总数据
                customerName: null, // 获取到的医院名称
                customerValue: null, // 获取到的重量
                newData: null
            }
        },

        mounted() {
            //参数赋值
            this.getData()
        },

        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getData()
            },
        },
        methods: {
            // 发送请求，获取数据
            async getData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/productionRanking', params)
                if (res && res.success) {
                    this.allData = res.result
                    // 获取到的医院名称
                    this.customerName = this.allData.map((item) => item.customer_name)
                    // 获取到的重量
                    this.customerValue = this.allData.map((item) => item.wasteSum)

                    let list = []
                    for (let index in this.customerValue) {
                        list.push({ name: this.customerName[index], value: this.customerValue[index], text: 'KG' })
                    }
                    list.forEach((item, index) => {
                        let value = parseFloat(item.value)
                        // value > 10000 kg|公斤
                        if (value > 10000) {
                            item['weight'] = parseInt(value / 1000)
                            item['text'] = '吨'
                        } else {
                            item['weight'] = value
                            item['text'] = 'KG'
                        }
                    })
                    // console.log('list',list);
                    this.newData = list
                }
                this.initChart()
            },
            // 初始化echartInstance的实例对象
            initChart() {
                let self = this;
                this.chartInstance = this.$echarts.init(document.getElementById('chart_right3'))
                let customerName = []
                this.newData.forEach((item, index) => {
                    customerName.push(item['name'])
                })
                let customerValue = []
                this.newData.forEach((item, index) => {
                    customerValue.push(item['value'])
                })

                let color = [
                    '#FDD56A',
                    '#20D3AB',
                    '#49CCFF']
                let color1 = [
                    '#FDD56A',
                    '#20D3AB',
                    '#49CCFF']
                let color2 = [
                    '#FDD56A22',
                    '#20D3AB22',
                    '#49CCFF22']

                let lineY = []
                let lineT = []
                let num = this.newData

                for (let i = 0; i < customerName.length; i++) {
                    let x = i
                    if (x > 1) {
                        x = 2
                    }
                    let data = {
                        name: num[i].name,
                        color: color[x],
                        value: num[i]['value'],
                        barGap: '-100%',
                        itemStyle: {
                            normal: {
                                show: true,
                                borderWidth: 2,
                                shadowBlur: 10,
                                borderColor: color2[x],
                                shadowColor: color[x],
                                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                    offset: 0,
                                    color: color[x]
                                }, {
                                    offset: 1,
                                    color: color1[x]
                                }], false),
                                barBorderRadius: 10
                            }
                        }
                    }

                    let data1 = {
                        color: color[x],
                        value: num[i]['value'],
                        barGap: '-100%',
                        itemStyle: {
                            color: '#00123500', //剩余部分颜色
                            barBorderRadius: 10
                        },
                        label: {
                            show: true,
                            // formatter: '{a|' + customerValue[i] + 'KG}',
                            formatter: function(params) {

                                let unit = num[i]['text']
                                let weight = num[i]['weight']
                                return '{a|' + weight + unit + '}'
                            },
                            position: 'right',
                            color: color[x],
                            distance: 20,
                            rich: {
                                a: {
                                    color: color[x],
                                    borderColor: color[x],
                                    borderWidth: 0.5,
                                    padding: [1, 10, 1, 10],
                                    height: 18,
                                    align: 'center',
                                    verticalAlign: 'middle',
                                    backgroundColor: color2[x]
                                }
                            }
                        }

                    }
                    lineY.push(data)
                    lineT.push(data1)
                }

                let option = {

                    title: {
                        show: false
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: (p) => {
                            // console.log('p', p)
                            if (p.seriesName === 'total') {
                                return ''
                            }
                            return `${p.name}<br/>${p.value}KG`
                        }
                    },
                    grid: {
                        borderWidth: 0,
                        top: '20px',
                        left: '5%',
                        right: '17%',
                        bottom: '10%'
                    },
                    dataZoom: [{
                        type: 'slider',
                        yAxisIndex: 0,
                        zoomLock: true,
                        width: 10,
                        height: '80%',
                        handleSize: 0,
                        showDetail: false,
                        start: 0,
                        end: 30
                    }, {
                        type: 'inside',
                        id: 'insideY',
                        yAxisIndex: 0,
                        start: 0,
                        end: 50,
                        zoomOnMouseWheel: false,
                        moveOnMouseMove: true,
                        moveOnMouseWheel: true
                    }],
                    color: color,
                    yAxis: [{
                        type: 'category',
                        inverse: true,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            inside: false
                        },
                        data: customerName
                    }, {
                        type: 'category',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false,
                            inside: false,
                            verticalAlign: 'bottom',
                            lineHeight: '20',
                            textStyle: {
                                color: '#fff',
                                fontSize: self.isMobile() ? 10 : 14,
                                fontFamily: 'PingFangSC-Regular'
                            },
                            formatter: function(val) {
                                return `${val}`
                            }
                        },
                        splitArea: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        data: customerValue
                    }],
                    xAxis: {
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    series: [{
                        name: 'total',
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: '15px',
                        data: lineT,
                        legendHoverLink: false
                    }, {
                        name: 'bar',
                        type: 'bar',
                        barWidth: '15px',
                        data: lineY,
                        label: {
                            normal: {
                                color: '#b3ccf8',
                                show: true,
                                position: [0, '-20px'],
                                formatter: function(a) {
                                    let num = ''
                                    let str = ''
                                    if (a.dataIndex + 1 < 10) {
                                        num = '0' + (a.dataIndex + 1)
                                    } else {
                                        num = (a.dataIndex + 1)
                                    }
                                    if (a.dataIndex === 0) {
                                        str = `{color1|${num}} {color4|${a.name}}`
                                    } else if (a.dataIndex === 1) {
                                        str = `{color2|${num}} {color4|${a.name}}`
                                    } else {
                                        str = `{color3|${num}} {color4|${a.name}}`
                                    }
                                    return str
                                },
                                rich: {
                                    color1: {
                                        color: '#FDD56A',
                                        fontSize: self.isMobile() ? 12 : 14,
                                        fontWeight: 700
                                    },
                                    color2: {
                                        color: '#20D3AB',
                                        fontSize: self.isMobile() ? 12 : 14,
                                        fontWeight: 700
                                    },
                                    color3: {
                                        color: '#49CCFF',
                                        fontSize: self.isMobile() ? 12 : 14,
                                        fontWeight: 700
                                    },
                                    color4: {
                                        color: '#fff',
                                        fontSize: self.isMobile() ? 12 : 14,
                                        fontWeight: 500,
                                    }
                                }
                            }
                        }
                    }]

                }
                this.chartInstance.setOption(option, true)
                // 对图表进行鼠标事件的监听
                // this.chartInstance.on('mouseover', () => {
                //   this.timerId && clearInterval(this.timerId)
                // })
                // this.chartInstance.on('mouseout', () => {
                //   this.startInterval()
                // })
            }

        }
    }
</script>

<style lang="less" scoped>
    .ranking-container {
        .chart {
            height: 3rem;
        }
    }
</style>
